<template>
  <div>
    <!-- 点击返回首页 -->
    <el-breadcrumb>
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加选中搜索栏 -->
    <el-card class="topFunctionBar">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="addNewPosts"
            >新增文章</el-button
          ></el-col
        >
        <el-col :span="12"
          ><el-input
            class="search"
            v-model="inputkeywords"
            placeholder="请输入内容"
            ><el-button
              slot="append"
              type="success"
              icon="el-icon-search"
              @click="handleClickSearch"
              >搜索</el-button
            ></el-input
          ></el-col
        >
        <el-col :span="4"
          ><el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="delSelectedPost"
            >删除选中文章</el-button
          ></el-col
        >
      </el-row>
      <!-- 数据表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="70px" label="全选?">
          <!-- <el-checkbox v-model="checked">备选项</el-checkbox> -->
          <!-- <el-radio v-model="radio" @click="selectAllOrNo"></el-radio> -->
        </el-table-column>
        <el-table-column label="id" prop="id" width="70px"> </el-table-column>
        <el-table-column
          label="标题"
          prop="title"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="作者"
          prop="author"
          width="80px"
        ></el-table-column>
        <el-table-column
          label="关键字"
          prop="keyWords"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="类型"
          prop="type"
          width="100px"
        ></el-table-column>
        <el-table-column
          label="创造时间"
          prop="created_time"
          width="150px"
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="updated_time"
          width="150px"
        ></el-table-column>
        <el-table-column
          label="浏览量"
          prop="browse"
          width="80px"
        ></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scoped">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scoped.row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDel(scoped.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Post',
  data() {
    return {
      tableData: [
        // {
        //   id: 1,
        //   title: '骆驼祥子',
        //   author: '鲁迅',
        //   keyWords: '鲁迅,祥子',
        //   type: '文学',
        //   created_time: '2016-05-02',
        //   updated_time: '2018-05-02',
        //   browse: 999,
        //   iamge_address: '',
        //   cate_id: '',
        // },
      ],
      radio: '',
      inputkeywords: '',
      page: 1, //当前页码数
      size: 5, //每页显示条数
      total: 0,
      isSearch: false, //搜索框默认不使用
    }
  },
  created() {
    this.getPost()
  },
  methods: {
    //获取文章
    getPost() {
      this.$http
        .get(`/cate/allpost?page=${this.page}&size=${this.size}`)
        .then((res) => {
          console.log(res) //查看返回数据
          this.tableData = res.result.data
          this.total = res.result.total
        })
    },
    //重新获取分页数据
    handleCurrentChange(p) {
      this.page = p

      if (!this.isSearch) {
        this.getPost()
      } else {
        this.getSearch()
      }
    },
    handleSizeChange(s) {
      this.size = s
      if (!this.isSearch) {
        this.getPost()
      } else {
        this.getSearch()
      }
    },
    //添加文章跳转
    addNewPosts() {
      this.$router.push('/addpost')
    },
    // 编辑文章跳转
    handleEdit(row) {
      this.$router.push('/editpost')
      // 回显数据的意思是--点进去的时候输入看显示当前行的数据
      this.$http.get(`/users/${row.id}`).then((data) => {
        // console.log(data)
        this.form = data.result
      })
    },
    // 删除单个选择的文章
    handleDel(row) {
      if (confirm('你确定要删除该文章嘛')) {
        this.$http.delete(`/users/${row.id}`).then((data) => {
          const { code, message, result } = data
          if (code == 0) {
            //提示修改成功
            this.$message.success(message)
            // 重新获取数据
            this.getPost()
          }
        })
      }
    },
    //删除选中的文章
    delSelectedPost() {
      if (confirm('你确定要删除选中的文章嘛')) {
        this.$http.delete(`/users/${row.id}`).then((data) => {
          const { code, message, result } = data
          if (code == 0) {
            //提示修改成功
            this.$message.success(message)
            // 重新获取数据
            this.getPost()
          }
        })
      }
    },
    //搜索框功能实现
    handleClickSearch() {
      // 搜索框实现搜索功能,这个已经对是否处于搜索进行判断了

      this.isSearch = true
      this.getSearch()
    },
    // 判断是否用了搜索功能,如果用了调用该函数
    getSearch() {
      this.$http
        .patch(
          `/users?username=${this.keyword}&page=${this.page}&size=${this.size}`
        )
        .then((data) => {
          this.users = data.result.data
          this.total = data.result.total.total
        })
    },
    //是否进行全选或者不全选
    selectAllOrNo() {
      // this.radio = !this.radio
    },
  },
}
</script>

<style scoped>
.search {
  width: 480px;
}
</style>
